@tailwind utilities;

.container {
  @apply w-full max-w-[1090px] mx-auto my-[75px] px-4;

  .title {
    @apply font-medium text-2xl text-[#2b2c3c] mb-[30px];
  }

  .content {
    @apply min-h-[2400px] relative;

    .masonry-grid {
      @apply w-full;
    }

    .card-item {
      @apply fade-in rounded-lg bg-white overflow-hidden cursor-pointer shadow-md transition-all duration-300;

      &:hover {
        @apply transform -translate-y-1 shadow-xl;
      }

      .card-footer {
        @apply p-[12px] flex flex-col gap-[10px] bg-white;

        .card-title {
          @apply text-sm text-[#333] leading-[1.4] line-clamp-2;
        }

        .card-author {
          @apply w-full flex items-center text-[#888] text-xs;

          .author-details {
            @apply flex items-center flex-1;

            .author-avatar {
              @apply w-[24px] h-[24px] rounded-full bg-[#f0f0f0] mr-[8px] object-cover;
            }

            .author-name {
              @apply flex-1 mr-[8px] truncate;
            }
          }

          .likes {
            @apply flex items-center gap-[4px] whitespace-nowrap;
          }
        }
      }
    }

    .loading {
      @apply text-center py-8 text-[#888] text-sm;
    }
  }
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }

  .masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
  }

  @screen sm {
    .masonry-grid { column-count: 2; }
  }

  @screen md {
    .masonry-grid { column-count: 2; }
  }

  @screen lg {
    .masonry-grid { column-count: 3; }
  }

  @screen xl {
    .masonry-grid { column-count: 4; }
  }

  .masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
  }

  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}